'use client';
import TaskCard from "@/components/task-card";
import { Skeleton } from "@/components/ui/skeleton"
import { trpc } from '@/trpc/client';

const Page = () => {

  // trpc 获取task 任务然后循环渲染
  const { data,isPending,refetch } = trpc.tasks.getMany.useQuery()
  if (!data) return <div>Loading...</div>;
  return <div className="grid grid-cols-3 gap-4">
    {
      data.map(task => {
        return (
          <TaskCard task={task} onSuccess={() => refetch()} key={task.id} />
        )
      })
    }
  </div>
}

export default Page;